<!--
 * @Author: hashMi 854059946@qq.com
 * @Date: 2023-12-06 15:06:12
 * @LastEditors: hashMi 854059946@qq.com
 * @LastEditTime: 2023-12-13 10:50:48
 * @FilePath: /audition-app/subPages/chinese-studies/detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="detail">
    <x-video
      ref="videoPlayer"
      :videoId="currentVideo.id"
      :src="currentVideo.videoSrc"
      :autoplay="autoplay"
      @play="videoPlay"
      @pause="videoPause"
      @ended="videoEnded"
      @timeupdate="videoTimeUp"
      @loadeddata="videoLoaded"
      @seeking="videoSeeking"
      @seeked="videoSeeked"
      @error="videoError"
    />

    <view class="video-content">
      <view class="video-content-title">
        <u-cell :border="false">
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text text_ellipsis">{{ currentTitle }}</text>
          </view>
        </u-cell>
      </view>
      <view class="video-content-introduction">
        <u-read-more showHeight="150" :toggle="true" ref="uReadMore">
          <rich-text :nodes="textContent"></rich-text>
        </u-read-more>
      </view>
      <view class="video-content-list">
        <u-cell
          v-for="(item, index) in allVideoList"
          @click="clickCurrentVideo(item, index)"
          :key="index"
        >
          <view slot="title">
            <text class="title"> 第{{ index }}章：</text>
            <text class="sub-title"> {{ item.title }} </text>
          </view>
          <view slot="value">
            <u-icon name="pause" v-if="index === currentIndex"> </u-icon>
            <u-icon name="play-right-fill" v-else> </u-icon>
          </view>
        </u-cell>
      </view>
    </view>
  </view>
</template>

<script>
import { getModelInfo } from "@/api";
export default {
  data() {
    return {
      currentVideo: {},
      currentIndex: -1,
      // 总时长
      allTime: 0,
      // 自动播放
      autoplay: false,
      // 当前时长
      currentTime: 0,

      videoList: [],
      // 简介内筒
      textContent: "",
      currentTitle: "",
    };
  },
  watch: {
    currentIndex(val) {
      if (val > 0) {
        this.autoplay = true;
      }
    },
    allVideoList(val) {
      this.currentVideo = val[0];
    },
  },
  computed: {
    allVideoList() {
      return this.videoList?.map((item, index) => {
        return {
          id: index,
          title: item.course_title,
          videoSrc: item.course_src,
        };
      });
    },
  },
  async onLoad(options) {
    let { id, text, title } = options;
    this.textContent = text;
    this.currentTitle = title;
    await this.getAllCourseResource(id);
  },
  mounted() {
    this.videoRef = this.$refs?.videoPlayer;
  },
  methods: {
    // 视频信息加载完成
    videoLoaded(durationTime) {
      this.allTime = durationTime;
      // console.log("总时长", durationTime);
    },
    // 当前播放时间
    videoTimeUp(currentTime) {
      this.currentTime = currentTime;
    },
    // 点击原始播放
    videoPlay() {
      if (this.currentIndex === -1) this.currentIndex = 0;
    },
    // 正在拖动
    videoSeeking() {
      console.log("拖动");
    },
    // 拖动结束
    videoSeeked() {
      console.log("拖动结束");
      if (this.$refs.videoPlayer.isVideoEnd) {
        this.currentVideo.status = false;
      }
    },
    // 触发暂停
    videoPause() {
      console.log("暂停");
      if (this.$refs.videoPlayer.isVideoEnd) return;
      if (!this.$refs.videoPlayer.isSeeked) return;
      this.currentVideo.status = this.$refs.videoPlayer.isVideoPlay;
    },
    // 播放结束
    videoEnded() {
      console.log("播放结束");
      this.currentVideo.status = false;
      // 自动播放下一集
    },
    // 播放错误
    videoError() {
      console.log("播放错误");
    },

    // 点击列表播放线项
    clickCurrentVideo(data, dataIndex) {
      // 点击切换 切换数据源
      this.currentVideo = data;
      this.currentIndex = dataIndex;
      this.videoRef.videoPlayClick();
    },

    // 获取到当前课程的所有视频资源
    async getAllCourseResource(id) {
      const { data } = await getModelInfo("65712abd262fbe2d9d0a8c09", id);
      this.videoList = data?.tableField103;
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  .video-content {
    padding: 30rpx;
    box-sizing: border-box;

    &-list {
      margin: 20rpx 0;
    }
  }
}

.u-slot-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}
</style>
